
const anchorList = [{tag:'前置知识',label:'前置知识'},{tag:'inquirer',label:'inquirer'},{tag:'commander',label:'commander'}]
import axios from "axios"
import { useEffect, useState } from "react"
import { marked } from 'marked'
import { gfmHeadingId } from "marked-gfm-heading-id";
import {Tag} from 'antd'

const options = {
	prefix: "",
};

marked.use(gfmHeadingId(options));
function Anchor() {
    const [article,setArticle] = useState({
        title:'',//标题
        tags:[],
        createdAt:'',
        content:'',// 文章内容
        comments:[],//评论
        viewCount:0,//阅读量
    })
    useEffect(()=>{
        axios.get('http://localhost:6060/article/90').then(res=>{
            // console.log('res', );
            const obj = res.data;
          const str =  marked(res.data.content)
   
           obj.content = str
                  console.log('str',obj);
            setArticle(obj)

        }).catch(error=>console.log('header',error)
        )

    },[])
    const InfoBlock =({createdAt,viewCount,tags}={})=>{
        console.log('createdAt',createdAt);
        return (
            <div style={{margin:'10px',fontSize:'14px'}}>
             <time>创建时间：{createdAt}</time> 
            <span style={{margin:'0 20px'}}>预览量：{viewCount}</span>
            <span style={{margin:'0 20px'}}>标签：
                {tags && tags.map(item=>(<Tag>{item.name}</Tag>))}
            </span>
            
            </div>
        )
    }
    const {title,tags,createdAt,content,comments} = article
    return ( 
        <div id='content' style={{height:'300px',overflow:'scroll'}}>
            <div style={{width:'70%',height:'1120px'}}>
                <h1>{title}</h1>
                {<InfoBlock {...article}/>}
                <div dangerouslySetInnerHTML={{ __html: content }}  />
            </div>
             <div style={{width:'200px',position:'fixed',right:'0px',top:'100px'}}>
                <ul>
                       {anchorList.map(item=>(
                        <li><a href={`#${item.tag}`} onClick={()=>{
                            document.querySelector(`#${item.tag}`).scrollIntoView({ block:'center'})
                        }}>{item.label}</a></li>
                            ))}
                    </ul>
             </div>
        </div>
     )
}

export default Anchor;